<template>
  <div>
    <div>
      <strong class="title">{{articleMsg.title}}</strong>
      <span>{{ pcate }}|{{ cate }}</span>
    </div>
    <div class="author">
      <img style="width:50px;height:50px;border-radius:50%;" :src="articleMsg.userPic" alt="">
      {{articleMsg.nickname}}
    </div>
    <p class="text" v-html="articleMsg.content"></p>
    <div class="numList">
      <span>评论量：{{ articleMsg.comment_num }}</span>
      <span>点赞量：{{ articleMsg.star_num }}</span>
      <span>阅读量：{{ articleMsg.watch_num }}</span>
      <button @click="CommentSwitchShow(true)">添加评论</button>
    </div>
    <comment-list :drawer="addCommentShow" @CommentSwitchShow="CommentSwitchShow()"></comment-list>
  </div>
</template>

<script>
import {searchArticle} from "@/api/article"
import {getArtcateById} from "@/api/artcate"
import commentList from "./ReadArticle/comment-list.vue"
export default {
  components:{
    'comment-list': commentList 
  },
  data(){
    return{
      articleMsg:{},
      pcate:"",
      cate:"",
      addCommentShow:false,
    }
  },
    methods:{
      ArtcateCates(){
        console.log(this.$route.query);
        var obj={
          id:this.$route.query.id
        }
        searchArticle(obj).then(res=>{
          if (res.status == 0) {
            this.articleMsg = res.data;
            console.log(res.data.cate_id);
            getArtcateById(res.data.cate_id).then(ress=>{
              if (ress.status == 0&&ress.data.pid!=0) {
                this.pcate = ress.data.name
                getArtcateById(ress.data.pid).then(resss=>{
                if (resss.status == 0) {
                  this.cate = resss.data.name;
                }
              })
              }
            })
          }
        })
      },
      CommentSwitchShow(flag){
        this.addCommentShow = flag;
      }
    },
    created(){
        this.ArtcateCates()
    }
}
</script>

<style>
.title{
  font-size: 30px;
  margin: 0 20px 0 50px;
}
.author{
  display: flex;
  width: 100%;
  height: 80px;
  line-height: 80px;
  align-content: center;
  flex-direction: row-reverse;
}
.text{
  user-select: none;
  text-indent:2em;
}
</style>